<template>
    <el-tabs value="add" type="card">
        <el-tab-pane label="新增临时素材" name="add">
            <StElDynamicForm
                    ref="addForm"
                    :options="addFormItems"
                    :origin-prop="{labelWidth: '80px'}"
                    :submit-props="{useDefault: false}"
                    v-on:requestSuccess="addFormSubmitData"
            >
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('保存')" native-type="submit"
                               @click="doAdd" size="mini" :loading="submitLoading">保存
                    </el-button>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('重置')"
                               @click="()=> {$refs.addForm.resetForm()}" size="mini">重置
                    </el-button>
                </template>
            </StElDynamicForm>
            <div v-if="addSuccessData.type">
                <el-form>
                    <el-form-item label="媒体类型">
                        {{addSuccessData.type}}
                    </el-form-item>
                    <el-form-item label="媒体id">
                        {{addSuccessData.mediaId}}
                    </el-form-item>
                    <el-form-item label="上传时间">
                        {{addSuccessData.createdAt}}
                    </el-form-item>
                </el-form>
            </div>
        </el-tab-pane>
        <el-tab-pane label="获取临时素材" name="get">
            <StElDynamicForm
                    ref="getForm"
                    :options="getFormItems"
                    :origin-prop="{labelWidth: '80px'}"
                    :submit-props="{useDefault: false}"
            >
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('获取')" native-type="submit"
                               @click="getMedia" size="mini">获取
                    </el-button>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('重置')"
                               @click="()=> {$refs.getForm.resetForm()}" size="mini">重置
                    </el-button>
                </template>
            </StElDynamicForm>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

    let mediaType = [
        {
            id: 'image',
            name: '图片'
        },
        {
            id: 'voice',
            name: '语音'
        },

        {
            id: 'video',
            name: '视频'
        },
        {
            id: 'thumb',
            name: '缩略图'
        },
    ]
    import MpUrl from '../../MpUrl.js'
    export default {
        components:{
        },
        name: "TemporaryMaterial",
        data(){
            return {
                submitLoading: false,
                // 上传成功后的数据
                addSuccessData:{
                    type: null,
                    mediaId: null,
                    createdAt: null
                },
                addFormItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                    {
                        field: {
                            name: 'type'
                        },
                        element:{
                            type: 'select',
                            options: {
                                datas: mediaType
                            },
                            required: true,
                            label: '媒体文件类型',
                        }
                    },
                    {
                        field: {
                            name: 'file'
                        },
                        element:{
                            type: 'uploadFileRaw',
                            options: {
                                drag: true,
                                tips: '图片（image）: 10M，支持bmp/png/jpeg/jpg/gif格式\n' +
                                    '<br/>' +
                                    '语音（voice）：2M，播放长度不超过60s，mp3/wma/wav/amr格式\n' +
                                    '<br/>' +
                                    '视频（video）：10MB，支持MP4格式\n' +
                                    '<br/>' +
                                    '缩略图（thumb）：64KB，支持JPG格式'
                            },
                            required: true,
                            label: '媒体',

                        }
                    },

                ],
                getFormItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                    {
                        field: {
                            name: 'mediaId'
                        },
                        element:{
                            required: true,
                            label: '媒体id',
                        }
                    },

                ]
            }
        },
        methods:{
            addFormSubmitData (data){
                this.addSuccessData = data
            },
            addUrl(form) {
                if(!form.appCode || !form.type){
                    this.$message.error('请选择公众号和媒体类型')
                    return false
                }
                return this.$stStringTools.replaceb(MpUrl.TemporaryMaterialAdd,form)
            },
            getMedia(form) {
                this.$refs.getForm.getFormRef().validate((valid)=>{
                    if(valid){
                        let form = this.$refs.getForm.getFormData()
                        window.open(this.$stStringTools.replaceb(MpUrl.TemporaryMaterialGet,form))
                    }
                })
            },
            doAdd() {
                let oldForm = this.$refs.addForm.getFormData()
                let url = this.addUrl(oldForm)
                if (url === false) {
                    return
                }
                // 提交表单
                this.$refs.addForm.getFormRef().validate((valid)=>{
                    if (valid) {

                        let formData = new FormData()
                        for (let key in oldForm){
                            let value = oldForm[key]
                            if(value && value.raw){
                                formData.append(key,value.raw)
                            }else{
                                formData.append(key,value)
                            }
                        }
                        this.submitLoading = true
                        this.axios.post(url,formData).then(res=>{
                            this.$message.success('保存成功')
                        }).catch(error=>{
                            if(error.response){
                                if(error.response.data && error.response.data.errorMsg){
                                    this.$message.error(error.response.data.errorMsg)
                                }
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                        }).finally(()=>{
                            this.submitLoading = false
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>